<template>
  <view class="container">
    <!-- 商品详情内容 -->
       <scroll-view class="product-scroll" scroll-y>
         <view class="product-detail">
           <image :src="product.img" mode="aspectFit"></image>
           <view class="product-info">
   			<view style="margin-bottom: 30px;align-items: center;width: 100%;">
   				<text class="product-title">{{ product.name }}</text>
   			</view>
             <view class="">
             	
             </view>
   		  <rich-text :nodes="product.info"></rich-text>
         <!--    <text class="product-description">{{  }}</text> -->
           </view>
         </view>
       </scroll-view>

    <!-- 底部悬浮栏 -->
    <view class="bottom-fixed-bar">
      <view class="price">
        <text>￥{{ product.price }}</text>
      </view>
      <button class="order-button" @click="placeOrder">立即下单</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      product: {
        image: '',
        title: '',
        description: '',
        price: 0
      }
    };
  },
  onLoad() {
    // 页面加载时请求商品详情接口
    this.getProductDetail();
  },
  methods: {
    getProductDetail() {
      uni.request({
        url: 'https://car.ydk1.cn/goods/detail?id=1', // 替换为实际的商品详情接口地址
        method: 'GET',
        success: (res) => {
          if (res.statusCode === 200) {
            this.product = res.data.data;
			console.log(this.product)
          } else {
            uni.showToast({
              title: '获取商品详情失败',
              icon: 'none'
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '网络请求失败',
            icon: 'none'
          });
        }
      });
    },
    placeOrder() {
      // 下单逻辑，请求下单接口
      uni.request({
        url: 'https://your-api-url.com/order/place', // 替换为实际的下单接口地址
        method: 'POST',
        data: {
          productId: this.product.id // 假设商品对象中有 id 属性
        },
        success: (res) => {
          if (res.statusCode === 200) {
            uni.showToast({
              title: '下单成功',
              icon: 'success'
            });
          } else {
            uni.showToast({
              title: '下单失败',
              icon: 'none'
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '网络请求失败',
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  position: relative;
  min-height: 100vh;
}

.product-scroll {
  height: calc(100vh - 50px); /* 减去底部栏的高度 */
}

.product-detail {
  padding: 20px;
}

.product-detail image {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.product-info .product-title {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 10px;
}

.product-info .product-description {
  font-size: 14px;
  color: #666;
}

.bottom-fixed-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 20px;
  background-color: #fff;
  border-top: 1px solid #eee;
  z-index: 100; /* 确保悬浮栏在最上层 */
}

.price {
  font-size: 18px;
  color: #f00;
  margin-left: 0; /* 让价格字段靠右 */
}

.order-button {
  background-color: #f00;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 0 20px; /* 调整内边距，只保留左右内边距 */
  font-size: 16px;
  height: 100%; /* 让按钮高度和底部栏高度一致 */
  display: flex;
  align-items: center; /* 垂直居中按钮文字 */
  justify-content: center; /* 水平居中按钮文字 */
  margin-right: 0;
}
</style>